import React, { Component } from 'react'




// https://www.infoq.cn/article/hMb0TSo_dDPpTNDPkmAr


// 1.2 用户登录
// 2. 登录功能
// ① 添加状态：username（账号） 和 password（密码）。
// ② 使用受控组件方式获取表单元素值。
// ③ 给 form 表单添加 onSubmit。
// ④ 创建方法 handleSubmit，实现表单提交。
// ⑤ 在方法中，通过 username 和 password 获取到账号和密码。
// ⑥ 使用 API 调用登录接口，将 username 和 password 作为参数。
// ⑦ 判断返回值 status 为 200 时，表示登录成功。
// ⑧ 登录成功后，将token 保存到本地存储中（hkzf_token）。
// ⑨ 返回登录前的页面。








// 使用 formik  进行表单验证
// - 安装： yarn add formik /  cnpm i  formik@1.5.7   --save   
// - 导入 withFormik，使用withFormit 高阶组件包裹Login组件
// - 为withFormit提供配置对象： mapPropsToValues / handleSubmit
// - 在Login组件中，通过props获取到values（表单元素值对象），handleSubmit，handleChange
// - 使用values提供的值，设置为表单元素的value，使用handleChange设置为表单元素的onChange
// - 使用handleSubmit设置为表单的onSubmit
// - 在handleSubmit中，通过values获取到表单元素值
// - 在handleSubmit中，完成登录逻辑


import { withFormik, Field, Form, ErrorMessage } from 'formik'




// 导入
import * as Yup from 'yup'



import { Toast, WhiteSpace, WingBlank } from 'antd-mobile';
// import { createForm } from 'rc-form';


import NavHeader from '../../components/NavHeader/NavHeader'


import styles from './index.module.css'

// 导入封装好的reqLogin 方法 
import { reqHotCity, reqLogin } from '../../utils/index'








// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/




class LoginIndex extends Component {








  render() {

    console.log('this.props', this.props)

    // const { values, handleSubmit, handleChange, errors,handleBlur,touched} = this.props
    // console.log(errors)







    return (


      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="username"
                placeholder="请输入账号"

              />
              {/* {errors.username && (<div style={{ color: 'red' }}> { errors.username}</div>)}

              {errors.userMessage && (<div style={{ color: 'red' }}> { errors.userMessage} </div>)} */}
              <ErrorMessage style={{ color: 'red' }} name="username" component='div' ></ErrorMessage>


            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
              />
              {/* {errors.password && (<div style={{ color: 'red' }}> { errors.password}</div>)}

              {errors.pwdMessage && (<div style={{ color: 'red' }}> { errors.pwdMessage} </div>)} */}
              <ErrorMessage className={styles.error} name="password" component='div'></ErrorMessage>

            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
                  </button>
            </div>
          </Form>
          {/* <Flex className={styles.backHome}>
                <Flex.Item>
                  <Link to="/registe">还没有账号，去注册~</Link>
                </Flex.Item>
              </Flex> */}
        </WingBlank>
      </div>




    )
  }
}


// 使用formik



let LoginForMik = withFormik({

  // username  ,  password 对应的是input  name值 


  mapPropsToValues: () => ({ username: '', password: '' }),


  //登录逻辑功能
  // data 里面有一个对象名字就叫props
  handleSubmit: async (value, { props }) => {
    console.log(value)  // 获取到的input 输入的值
    try {
      let res = await reqLogin(value)
      var { body, description, status } = res

      console.log(description)

      console.log(status)

      console.log(body)




    } catch (error) {

      console.log(error)

    }


    if (status != 200) {
      Toast.fail(description);


    } else {




      var token = body.token

      localStorage.setItem('hkzf_token', token)

      // console.log('props',data.props)

      // this.props.history.go(-1)
      // data.props.history.go(-1)

      /* 
       1 登录成功后，判断是否需要跳转到用户想要访问的页面（判断 props.location.state 是否有值）。
       2 如果不需要（没有值），则直接调用 history.go(-1) 返回上一页。
       3 如果需要，就跳转到 from.pathname 指定的页面（推荐使用 replace 方法模式，而不是 push）。
     */
      if (props.location.state) {

        props.history.replace(props.location.state.from.pathname)
      } else {
        props.history.go(-1)

      }



    }





  },

  //进行表单验证 


  // validate: (value, props) => {
  //   let errors = {}

  //   let { username, password } = value

  //   //验证非空
  //   if (!username) {
  //     errors.username = '用户名不能为空'
  //   }
  //   //验证正则 

  //   if (!REG_UNAME.test(username)) {
  //     errors.userMessage = '长度为5到8位，只能出现数字、字母、下划线'
  //   }





  //   if (!password) {
  //     errors.password = '用户名不能为空'
  //   }

  //   if (!REG_PWD.test(password)) {
  //     errors.pwdMessage = '长度为5到8位，只能出现数字、字母、下划线'
  //   }


  //   return errors;
  // }





  // formik 配合 Yup 进行验证 

//   安装：yarn add yup （ Yup 文档 ），导入 Yup。
// ② 在 withFormik 中添加配置项 validationSchema，使用 Yup 添加表单校验规则。
// ③ 在 Login 组件中，通过 props 获取到 errors（错误信息）和 touched（是否访问过，
// 注意：需要给表单 元素添加 handleBlur 处理失焦点事件才生效！）。
// ④ 在表单元素中通过这两个对象展示表单校验错误信息。

  // 表单校验规则,在表单失去焦点时会自动触发


  validationSchema: Yup.object().shape({
    // yup必须先规定数据类型才能添加其他的配置，matches可以用来匹配正则校验规则
    username: Yup.string().trim().required("请输入用户名").matches(/^[a-zA-Z_\d]{5,8}$/, "长度为5到8位，只能出现数字、字母、下划线"),
    password: Yup.string().trim().required("请输入密码").matches(/^[a-zA-Z_\d]{5,12}$/, "长度为5到12位，只能出现数字、字母、下划线")

  })







})(LoginIndex)


export default LoginForMik


